<!DOCTYPE html>
<html><head>
<title>test1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="HTML KickStart is a ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you a lot of hours on your next web project." />
<meta name="copyright" content="Joshua Gatcke 99lime.com All Rights Reserved" />
<link rel="stylesheet" type="text/css" href="https://kalendar-dogadanja-gge.googlecode.com/svn/trunk/googlesite/kickstart/css/kickstart.css" media="all" />                  <!-- KICKSTART -->
<link rel="stylesheet" type="text/css" href="style.css" media="all" />                          <!-- CUSTOM STYLES -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://kalendar-dogadanja-gge.googlecode.com/svn/trunk/googlesite/kickstart/js/kickstart.js"></script>                                  <!-- KICKSTART -->
</head><body>

<div class="grid">
<!-- ===================================== 
	BUTTONS 
===================================== -->


<style type="text/css">
#btn-example .button-bar{margin-bottom:10px;}
</style>

<h3 id="buttons">Buttons</h3>
<ul class="tabs">
<li><a href="#btn-example">Example</a></li>
<li><a href="#btn-sizes">Sizes</a></li>
<li><a href="#btn-icons">With Icons</a></li>
<li><a href="#btn-colors">Colors</a></li>
<li><a href="#btn-styles">Styles</a></li>
<li><a href="#btn-bar">Button Bar</a></li>
</ul>
	
	<style type="text/css">
	#btn-example a.button, #btn-example button{margin-bottom:10px;}
	</style>

	<div id="btn-example" class="tab-content">
	<div class="col_3">
	<h4>Buttons</h4>
	<button>Button</button><br />
	<a class="button" href="">A.button</a><br />
	<button class="small">Small</button> <br />
	<button class="small" disabled="disabled">Small (disabled)</button><br />
	<button class="medium">Medium</button><br />
	<button class="large">Large</button>
	</div>
	
	<!-- BUTTONS W/ICON -->
	<div class="col_3">
	<h4>With Icons</h4>
	<button class="small"><i class="icon-picture"></i> Small</button><br />
	<button class="medium"><i class="icon-coffee"></i> Medium</button><br />
	<button class="large"><i class="icon-leaf"></i> Large</button><br />
	</div>
	
	<!-- BUTTON VARIATIONS -->
	<div class="col_3">
	<h4>Colors</h4>
	<button class="blue"><i class="icon-star"></i> .blue</button><br />
	<a class="button orange" href=""><i class="icon-music"></i> .orange</a><br />
	<button class="small pink"><i class="icon-plus-sign"></i> .pink</button><br /> 
	<button class="medium green"><i class="icon-play-circle"></i> .green</button><br />
	<button class="large red"><i class="icon-minus-sign"></i> .red</button>
	</div>
	
	<!-- BUTTON STYLES -->
	<div class="col_3">
	<h4>Styles</h4>
	<button>default</button><br />
	<button class="pill"><i class="icon-star"></i> .pill</button><br />
	<a class="button pop" href=""><i class="icon-music"></i> .pop</a><br />
	<button class="inset"><i class="icon-plus-sign"></i> .inset</button> <br />
	<button class="square"><i class="icon-minus-sign"></i> .square</button>
	</div><div class="clear"></div>
	
	<div class="col_12">
	<h4>Button Bar</h4>
	<ul class="button-bar">
	<li><a href=""><i class="icon-pencil"></i> Edit</a></li>
	<li><a href=""><i class="icon-tag"></i> Tag</a></li>
	<li><a href=""><i class="icon-upload-alt"></i> Upload</a></li>
	<li><a href=""><i class="icon-plus-sign"></i></a></li>
	</ul>&nbsp;&nbsp;
	
	<ul class="button-bar">
	<li><a href=""><i class="icon-folder-open"></i></a></li>
	<li><a href=""><i class="icon-file"></i></a></li>
	<li><a href=""><i class="icon-trash"></i></a></li>
	<li><a href=""><i class="icon-wrench"></i></a></li>
	</ul>&nbsp;&nbsp;
	
	<ul class="button-bar">
	<li><a href="">Item1</a></li>
	<li><a href=""><i class="icon-globe"></i> Item2</a></li>
	<li><a href="">Item3</a></li>
	<li><a href="">Item4</a></li>
	</ul>&nbsp;&nbsp;
	
	<ul class="button-bar">
	<li><a href=""><i class="icon-caret-left"></i></a></li>
	<li><a href=""><i class="icon-caret-right"></i></a></li>
	</ul>
	</div>
	</div>
	
	<div id="btn-sizes" class="tab-content">
<pre>
&lt;!-- Button Sizes --&gt;
&lt;button&gt;Button&lt;/button&gt;
&lt;a class=&quot;button&quot; href=&quot;&quot;&gt;A.button&lt;/a&gt;
&lt;button class=&quot;small&quot;&gt;Small&lt;/button&gt;
&lt;button class=&quot;small&quot; disabled=&quot;disabled&quot;&gt;Small (disabled)&lt;/button&gt;
&lt;button class=&quot;medium&quot;&gt;Medium&lt;/button&gt;
&lt;button class=&quot;large&quot;&gt;Large&lt;/button&gt;</pre>
	</div>
	
	<div id="btn-icons" class="tab-content">
<pre>
&lt;!-- Buttons w/Icons --&gt;
&lt;button class=&quot;small&quot;&gt;&lt;i class=&quot;icon-picture&quot;&gt;&lt;/i&gt; Small&lt;/button&gt;
&lt;button class=&quot;medium&quot;&gt;&lt;i class=&quot;icon-coffee&quot;&gt;&lt;/i&gt; Medium&lt;/button&gt;
&lt;button class=&quot;large&quot;&gt;&lt;i class=&quot;icon-leaf&quot;&gt;&lt;/i&gt; Large&lt;/button&gt;</pre>
	</div>
	
	<div id="btn-colors" class="tab-content">
<pre>
&lt;!-- Buttons w/Colors --&gt;
&lt;button class=&quot;blue&quot;&gt;&lt;i class=&quot;icon-star&quot;&gt;&lt;/i&gt; .blue&lt;/button&gt;
&lt;a class=&quot;button orange&quot; href=&quot;&quot;&gt;&lt;i class=&quot;icon-music&quot;&gt;&lt;/i&gt; .orange&lt;/a&gt;
&lt;button class=&quot;small pink&quot;&gt;&lt;i class=&quot;icon-plus-sign&quot;&gt;&lt;/i&gt; .pink&lt;/button&gt;
&lt;button class=&quot;medium green&quot;&gt;&lt;i class=&quot;icon-play-circle&quot;&gt;&lt;/i&gt; .green&lt;/button&gt;
&lt;button class=&quot;large red&quot;&gt;&lt;i class=&quot;icon-minus-sign&quot;&gt;&lt;/i&gt; .red&lt;/button&gt;</pre>
	</div>
	
	<div id="btn-styles" class="tab-content">
<pre>
&lt;!-- Default (no style) --&gt;
&lt;button&gt;default&lt;/button&gt;

&lt;!-- Pill --&gt;
&lt;button class=&quot;pill&quot;&gt;&lt;i class=&quot;icon-star&quot;&gt;&lt;/i&gt; .pill&lt;/button&gt;

&lt;!-- Pop --&gt;
&lt;a class=&quot;button pop&quot; href=&quot;&quot;&gt;&lt;i class=&quot;icon-music&quot;&gt;&lt;/i&gt; .pop&lt;/a&gt;

&lt;!-- Inset --&gt;
&lt;button class=&quot;inset&quot;&gt;&lt;i class=&quot;icon-plus-sign&quot;&gt;&lt;/i&gt; .inset&lt;/button&gt;

&lt;!-- Square --&gt;
&lt;button class=&quot;square&quot;&gt;&lt;i class=&quot;icon-minus-sign&quot;&gt;&lt;/i&gt; .square&lt;/button&gt;
</pre>
	</div>
	
	<div id="btn-bar" class="tab-content">
<pre>
&lt;!-- Button Bar w/icons --&gt;
&lt;ul class=&quot;button-bar&quot;&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;i class=&quot;icon-pencil&quot;&gt;&lt;/i&gt; Edit&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;i class=&quot;icon-tag&quot;&gt;&lt;/i&gt; Tag&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;i class=&quot;icon-upload-alt&quot;&gt;&lt;/i&gt; Upload&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;i class=&quot;icon-plus-sign&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>
<!-- ===================================== 
	IMAGES 
===================================== -->
<h3 id="images">Images</h3>
<ul class="tabs">
<li><a href="#images-example">Example</a></li>
<li><a href="#images-caption">.caption</a></li>
<li><a href="#images-gallery">DIV.gallery</a></li>
<li><a href="#images-left">.align-left</a></li>
<li><a href="#images-right">.align-right</a></li>
<li><a href="#images-full-width">.full-width</a></li>
</ul>

	<div id="images-example" class="tab-content">
	<div class="col_6">
	<h4>IMG.caption</h4>
	<img class="caption" title="This is the image caption" src="http://placehold.it/400x350/4D99E0/ffffff.png&text=400x350" width="400" height="350" /> 
	</div>
	
	<div class="col_6 gallery">
	<h4>DIV.gallery</h4>
	<a href="http://placehold.it/600x450/4D99E0/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/75CC00/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/75CC00/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/E49800/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E49800/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/E4247E/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E4247E/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/00C6E4/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/00C6E4/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/E4DB0F/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E4DB0F/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/7400E4/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/7400E4/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/C50000/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/C50000/ffffff.png&text=100x100" width="100" height="100" /></a>
	</div>
	
	<div class="clear">&nbsp;</div>
	
	<div class="col_4">
	<h4>IMG.align-left</h4>
	<img class="align-left" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
	in hendrerit in vulputate velit esse molestie consequat.</p>	
	</div>
	
	<div class="col_4">
	<h4>IMG.align-right</h4>
	<img class="align-right" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
	in hendrerit in vulputate velit esse molestie consequat.</p>	
	</div>
	
	<div class="col_4">
	<h4>IMG.full-width</h4>
	<img class="full-width" src="http://placehold.it/260x200/4D99E0/ffffff.png&text=full+width" />	
	</div>
	</div>
	
	<div id="images-caption" class="tab-content">
<pre>
&lt;!-- Caption --&gt;
&lt;img class=&quot;caption&quot; title=&quot;This is the image caption&quot; src=&quot;http://placehold.it/400x350/4D99E0/ffffff.png&amp;text=400x350&quot; width=&quot;400&quot; height=&quot;350&quot; /&gt;</pre>
	</div>
	
	<div id="images-left" class="tab-content">
<pre>
&lt;!-- Align Left --&gt;
&lt;img class=&quot;align-left&quot; src=&quot;http://placehold.it/100x100/4D99E0/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;</pre>
	</div>
	
	<div id="images-right" class="tab-content">
<pre>
&lt;!-- Align Right --&gt;
&lt;img class=&quot;align-right&quot; src=&quot;http://placehold.it/100x100/4D99E0/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;</pre>
	</div>
	
	<div id="images-full-width" class="tab-content">
<pre>
&lt;!-- Full Width --&gt;
&lt;img class=&quot;full-width&quot; src=&quot;http://placehold.it/260x200/4D99E0/ffffff.png&amp;text=full+width&quot; /&gt;</pre>
	</div>
	
	<div id="images-gallery" class="tab-content">
<pre>
&lt;!-- Gallery --&gt;
&lt;div class=&quot;gallery&quot;&gt;
&lt;a href=&quot;http://placehold.it/600x450/4D99E0/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/4D99E0/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/75CC00/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/75CC00/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/E49800/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/E49800/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/E4247E/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/E4247E/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/00C6E4/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/00C6E4/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/E4DB0F/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/E4DB0F/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/7400E4/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/7400E4/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;http://placehold.it/600x450/C50000/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/C50000/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
&lt;/div&gt;</pre>
	</div>

<!-- ===================================== 
	SLIDESHOW 
===================================== -->
<h3 id="slideshow">Slideshow</h3>
<ul class="tabs">
<li><a href="#slideshow-example">Example</a></li>
<li><a href="#slideshow-html">HTML</a></li>
</ul>

	<div id="slideshow-example" class="tab-content">
	<p>Fully responsive slideshow. Touch enabled. Uses the awesome & highly configurable <a href="http://bxslider.com/">BXSlider</a>.</p>
	<div class="col_8">
	<ul class="slideshow">
	<li><img src="http://placehold.it/550x350/4D99E0/ffffff.png&text=550x350" width="550" height="350" /></li>
	<li><img src="http://placehold.it/550x350/75CC00/ffffff.png&text=550x350" width="550" height="350" /></li>
	<li><img src="http://placehold.it/550x350/E49800/ffffff.png&text=550x350" width="550" height="350" /></li>
	</ul>
	</div>


	
	<div class="col_4">
	<h4>Features</h4>
	<ul class="icons">
	<li><i class="icon-ok"></i> Slide Any HTML Content</li>
	<li><i class="icon-ok"></i> Responsive</li>
	<li><i class="icon-ok"></i> Touch Enabled</li>
	<li><i class="icon-ok"></i> Iframes</li>
	<li><i class="icon-ok"></i> Videos</li>
	<li><i class="icon-ok"></i> Images</li>
	<li><i class="icon-ok"></i> Lightweight</li>
	<li><i class="icon-ok"></i> Multiple Slideshows</li>
	<li><i class="icon-ok"></i> Zero Setup Required</li>
	<li><i class="icon-ok"></i> Unordered List (default)</li>
	</ul>
	</div>
	</div>
	
	<div id="slideshow-html" class="tab-content">
<pre>
&lt;!-- Slideshow --&gt;
&lt;ul class=&quot;slideshow&quot;&gt;
&lt;li&gt;&lt;img src=&quot;http://placehold.it/550x350/4D99E0/ffffff.png&amp;text=550x350&quot; width=&quot;550&quot; height=&quot;350&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;http://placehold.it/550x350/75CC00/ffffff.png&amp;text=550x350&quot; width=&quot;550&quot; height=&quot;350&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;http://placehold.it/550x350/E49800/ffffff.png&text=550x350&quot; width=&quot;550&quot; height=&quot;350&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;h3&gt;Slide Anything&lt;/h3&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
	</div>
<script type="text/javascript">

$('.bxslider').bxSlider({
  auto: true,
  autoControls: true
});

</script>

</div>
</body></html>